<template>
	<view class="u-p-t-60 u-p-l-60 u-p-r-60 u-p-b-30 logincontainer">
		<u-avatar size="140" src="/static/user.jpg" mode="circle"></u-avatar>
		<u-form :model="loginModel" ref="form1" class="forms">
			<u-form-item prop="username" left-icon-style="font-size: 24px;color: #4BC26A;" label-width="auto" left-icon="account-fill">
				<u-input placeholder="请输入账号" v-model="loginModel.username" />
			</u-form-item>
			<u-form-item prop="password" left-icon-style="font-size: 24px;color: #4BC26A;" label-width="auto" left-icon="lock">
				<u-input type="password" placeholder="请输入密码" v-model="loginModel.password" />
			</u-form-item>
			<view @click="toPassword" style="padding-top: 8px;display: flex;justify-content: flex-end;color: #4BC26A;">
				忘记密码
			</view>
		</u-form>
		<u-button @click="loginBtn" shape="circle" style="width: 100%;padding-top: 15px;" type="success">登录</u-button>
		<u-button @click="toRegister" shape="circle" style="width: 100%;padding-top: 30px;" type="success">注册</u-button>
	</view>
</template>

<script setup>
import { onReady } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import {loginApi} from '../../src/api/user.js'
	//表单ref属性
	const form1 = ref()
	const loginModel = reactive({
		username:'11',
		password:'123456'
	})
	//跳转注册
	const toRegister = ()=>{
		uni.navigateTo({
			url:'../../pages/register/register'
		})
	}
	//跳转忘记密码 
	const toPassword = ()=>{
		uni.navigateTo({
			url:'../../pages/forget_password/forget_password'
		})
	}
	//表单验证规则
	const rules = reactive({
		username: [{ required: true, message: '请输入账号', trigger: ['change'] }],
		password: [{ required: true, message: '请输入密码', trigger: ['change'] }]
	})
	//登录
	const loginBtn = ()=>{
		form1.value.validate(async(valid)=>{
			if(valid){
				let res = await loginApi(loginModel)
				if(res && res.code == 200){
					//存储用户id
					uni.setStorageSync("userId",res.data.userId)
					//跳转首页
					uni.switchTab({
						url:'../../pages/index/index'
					})
				}
			}
		})
	}
	onReady(()=>{
		form1.value.setRules(rules)
	})
</script>

<style lang="scss">
	page{
		height: 100%;
	}
.logincontainer{
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	.forms{
		width: 100%;
		padding: 35px 20px;
	}
}
</style>